import React from 'react'
import "./index.less"
import { Layout } from 'antd';
const { Header, Footer, Content,Sider, } = Layout;
import {Menu,Breadcrumb} from 'antd'
const {SubMenu}=Menu
import {UserOutlined,LaptopOutlined,NotificationOutlined} from '@ant-design/icons';

export default class Layout_demo3 extends React.Component{
    render(){
        return (
            <div className="Layout_demo3">
                <h1>layout 布局3</h1>
                <Layout>
                    <Header>
                        <div className="logo"></div>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background">
                            <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub2']} style={{ height: '100%', borderRight: 0 }}>
                                <SubMenu key="sub1" icon={<UserOutlined/>} title="subnav 1">
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined/>} title="subnav 2">
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined/>} title="subnav 3">
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content className="site-layout-background" style={{padding: 24,margin: 0,minHeight: 280,}}>Content</Content>
                        </Layout>
                    </Layout>
                    <Footer style={{textAlign:'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </div>
        )
    }
}